<template>
  <div>
    <!-- //4、把注册的组件名当做标签直接使用即可 -->
    <!-- //如果没有插槽，推荐使用单标签 -->
<HmHeader/>
<HmFooter/>
<HmContent/>
<HmContent/>
<!-- 测试父传子 -->
<!-- 1、父传子，给子组件标签设置属性 -->
<!-- 2、在子组件中使用props接收数据 -->
 <!-- 如果传的不是字符串，要加v-bind -->
<HmCount :xxx="count" msg="hello" 
@changeCount="fn" />
<!-- 子传父第二部 -->
 <!-- template标签中使用：数据 计算属性，方法，都不需要带this -->
  </div>
</template>
<!-- 在script标签中，使用都需要带this-->
<script>
//局部自定义组件
//1、创建一个.vue 文件
//2、导入自定义组件
//3、注册组件
//4、把注册的组件名当做标签直接使用即可
import HmContent from './components/HmContent.vue';
import HmCount from './components/HmCount.vue';
import HmHeader from './components/HmHeader.vue';
export default {
  data() {
    return {
      count:3
    }
  },
  //3、注册组件
    components:{
    HmHeader,
    HmContent,
    HmCount
  },
  //子传父第三步
    methods: {
      fn(a, b) {
      this.count+= a
      console.log('a,b  ----->  ', a, b);
      console.log('this.count  ----->  ', this.count);
    }
    }
    
  }
</script>

<style  scoped>

</style>